<template>
    <div>
        <el-row>
            <!-- 信息查询 -->
            <el-form size="mini" inline ref="queryFormRef" :model="queryForm">
                <el-form-item label="人员名称" prop="name">
                    <el-input v-model="queryForm.name"></el-input>
                </el-form-item>
                <el-form-item label="员工类型" prop="roleId">
                    <!-- <el-input placeholder="请输入员工类型" v-model="queryForm.roleName"></el-input> -->
                    <el-select v-model="queryForm.roleId" placeholder="未选择">
                        <el-option v-for="item in roleType" :label="item.name" :key="item.value"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="resetForm('queryForm'), getListPerson()">重置</el-button>
                    <el-button type="primary" plain @click="handleAdd">添加</el-button>
                </el-form-item>
            </el-form>

            <!-- 表格 -->
            <el-table :data="personList">
                <el-table-column type="index" label="序号" align="center" width="50"
                    show-overflow-tooltip></el-table-column>
                <el-table-column prop="name" label="名称" align="center" width="180" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="phoneNumber" label="电话" align="center" width="200"></el-table-column>
                <el-table-column prop="cardId" label="身份证" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="roleName" label="人员类型" align="center" width="180"
                    show-overflow-tooltip></el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center" width="200"
                    show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" align="center" width="280" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
                        <el-button type="danger" @click="handleDetele(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页组件 -->
            <el-row type="flex">
                <div class="block">
                    <!-- .sync类似v-model，实现页面数据双向响应式 -->
                    <el-pagination background :current-page.sync="pageIniation.pageNum" :page-sizes="[5]"
                        :page-size="pageIniation.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageIniation.total"
                        @current-change="handleChange">
                    </el-pagination>
                </div>
            </el-row>

            <!-- 弹窗：实现添加和编辑功能 -->
            <el-dialog :visible.sync="dialog.visible" width="400px" @close="resetForm('dialogForm')">
                <template #title>
                    <div style="text-align: center;">
                        {{ dialog.mode === "add" ? "添加人员" : "编辑人员" }}
                    </div>
                </template>
                <el-form :model="dialog.form" label-width="100px" label-position="left" size="small"
                    :rules="dialog.rules" ref="dialogFormRef" hide-required-asterisk>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="dialog.form.name">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phoneNumber">
                        <el-input v-model="dialog.form.phoneNumber">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="身份证" prop="cardId">
                        <el-input v-model="dialog.form.cardId">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="员工类型" prop="roleId">
                        <el-select v-model="dialog.form.roleId" placeholder="请选择">
                            <el-option v-for="item in roleType" :label="item.name" :key="item.value"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item align="right">
                        <el-button type="plain" @click="dialog.visible = false, resetForm('dialogForm')">取消</el-button>
                        <el-button type="primary" @click="handleSubmit">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>
import { query } from '@/utils/common.js';
import { listPerson, addPerson, editPerson, deletePerson } from '@/api/person.js';
export default {
    name: "Person",
    data() {
        return {
            //小区id对应下的人员信息
            plotId: undefined,

            //人员列表
            personList: [],

            //人员类型
            roleType: [
                {
                    name: "员工",
                    value: 1
                },
                {
                    name: "业主",
                    value: 2
                },
                {
                    name: "访客",
                    value: 3
                },
            ],

            //信息查询
            queryForm: {
                name: undefined,
                roleId: undefined,
            },


            //分页
            pageIniation: {
                pageNum: 1,
                pageSize: 5,
                total: 0,
            },


            //添加的弹窗
            dialog: {
                mode: "add",
                visible: false,
                form: {
                    name: undefined,
                    phoneNumber: undefined,
                    cardId: undefined,
                    roleId: undefined,
                },
                //校验
                rules: {
                    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
                    phoneNumber: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
                    cardId: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
                }

            }
        }
    },

    computed: {

    },

    created() {
        this.plotId=this.$store.state.curId,
        this.getListPerson()
    },

    methods: {
        //获取小区人员列表
        getListPerson(query = {}) {
            //过滤掉多余的参数
            const { total, ...rest } = this.pageIniation
            listPerson({ ...query, ...rest, plotId: this.plotId }).then(res => {
                this.personList = res.rows
                this.pageIniation.total = res.total
            })

        },

        //点击查询，获取小区信息
        handleQuery() {
            //查询为空(包括空格)时，进行提示，提示先输入值，至少有一个输入框有值：some,用于数组
            const hasInput = query(this.queryForm)
            //不符合，进行提示
            this.pageIniation.pageNum = 1
            if (!hasInput) this.$message.warning("请输入值！")

            const queryRole = {
                name: this.queryForm.name || undefined,
                roleId: this.queryForm.roleId || undefined
            }
            this.getListPerson(queryRole)
        },

        //查询后重置
        resetForm(refName) {
            this.$refs[`${refName}Ref`].resetFields()
        },

        handleChange(value) {
            //更新当前页
            this.pageIniation.pageNum = value
            this.getListPerson(this.queryForm)
        },

        handleChangeSize(value) {
            //更新当前页
            this.pageIniation.pageSize = value
            this.getListPerson(this.queryForm)
        },

        //添加人员
        handleAdd() {
            this.dialog.visible = true
            this.dialog.mode = "add"
        },

        //编辑人员
        handleEdit(row) {
            this.dialog.visible = true
            this.dialog.mode = "edit"
            //等dom更新之后再执行，解决：点击编辑之后再点添加显示的是编辑的信息的问题
            this.$nextTick(() => {
                //进行数据回显，信息显现在编辑表单
                this.dialog.form = JSON.parse(JSON.stringify(row))
            })

        },

        //提交
        handleSubmit() {
            //空值提交先进行校验提醒
            this.$refs[`dialogFormRef`].validate(async valid => {

                //检验失败
                if (!valid) return
                //校验成功(判断是添加还是编辑)
                //过滤不需要的参数
                let { createTime, personId, ...rest } = this.dialog.form
                let result = {}
                switch (this.dialog.mode) {
                    case "add":
                        try {
                            result = await addPerson({ ...rest, plotId: this.plotId });
                        } catch (error) {
                            break;
                        }

                    case "edit":
                        try {
                            result = await editPerson({ ...rest, personId, plotId: this.plotId })
                        } catch (error) {
                            break
                        }
                }

                this.$message.success(result.msg)
                this.getListPerson()
                //关闭弹窗
                this.dialog.visible = false
                //添加后重置表单
                this.resetForm("dialogForm")//this.resetForm(dialog.Form)

            })


        },

        //删除人员
        handleDetele(row) {
            //提示
            this.$confirm(`是否删除【${row.name}】？`, "系统提示", {
                type: "warning",
                //确定.then
            }).then(() => {
                deletePerson(row.personId).then(res => {
                    this.$message.success(res.msg)
                    //删除后，重新更新人员信息
                    this.getListPerson()
                })
                //取消.catch
            }).catch((err) => { })
        }


    }
}


</script>

<style lang="scss" scoped></style>